<template>

	<div class="product">
		<!--搜索表单-->
		<div class="common-seach-wrap">
			<el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
				<el-form-item label="商品名称">
					<el-input size="small" v-model="searchForm.name" placeholder="请输入商品名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" icon="Search" @click="onSubmit">查询</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!--内容-->
		<div class="product-content">
			<div class="table-wrap">
				<el-tabs v-model="activeName" @tab-change="handleClick">
					<el-tab-pane label="全部申请" name="-1"></el-tab-pane>
					<el-tab-pane label="待审核" name="0"></el-tab-pane>
					<el-tab-pane label="审核通过" name="1"></el-tab-pane>
					<el-tab-pane label="审核未通过" name="2"></el-tab-pane>
				</el-tabs>
				<el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
					<el-table-column prop="product_name" label="商品" width="400px"></el-table-column>
					<el-table-column prop="nickName" label="申请用户"></el-table-column>
					<el-table-column prop="score" label="申请性质">
						<template #default="scope">
							<span v-if="scope.row.type=='store'" class="red">门店</span>
							<span v-else-if="scope.row.type=='area'" class="orange">区县</span>
							<span v-else-if="scope.row.type=='city'" class="gray">市级</span>
						</template>
					</el-table-column>
					<el-table-column prop="address" label="配送地址"></el-table-column>
					<el-table-column prop="linkname" label="联系人"></el-table-column>
					<el-table-column prop="linkmobile" label="联系号码"></el-table-column> 
					<el-table-column prop="score" label="申请状态">
						<template #default="scope"> 
							<span v-if="scope.row.status==0" class="red">待审核</span>
							<span v-else-if="scope.row.status==2" class="orange">已驳回</span>
							<span v-else-if="scope.row.status==1" class="gray">已拨付</span>
						</template>
					</el-table-column>
					<el-table-column prop="timestamp" label="申请时间"></el-table-column>
					<el-table-column prop="remark" label="备注"></el-table-column>
					<el-table-column fixed="right" label="操作" width="110">
						<template #default="scope">
							<el-button v-if="scope.row.status==0" @click="detailClick(scope.row)" type="text" size="small">通过</el-button>
							<el-button v-if="scope.row.status==0"  @click="delClick(scope.row)" type="text" size="small">驳回</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--分页-->
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
					:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
					:total="totalDataNumber">
				</el-pagination>
			</div>
		</div>
		
		<el-dialog title="库存审核" v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="600px">
			<el-form >
			  <div>
			    <el-form-item label="驳回原因" :label-width="formLabelWidth">
			      <el-input v-model="remark" autocomplete="off"></el-input>
			    </el-form-item>
			  </div>
			</el-form>
			<template #footer>
			    <div class="dialog-footer">
			        <el-button @click="dialogFormVisible">取 消</el-button>
			        <el-button type="primary" @click="editApplyStatus">确 定</el-button>
			    </div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import PorductApi from '@/api/product.js';
	export default {
		components: {

		},
		data() {
			return {
				dialogVisible:false,
				loading: true,
				activeName: '-1',
				num: 0,
				/*列表数据*/
				tableData: [],
				/*一页多少条*/
				pageSize: 20,
				/*总条数*/
				totalDataNumber: 0,
				/*当前是第几页*/
				curPage: 1,
				/*搜索参数*/
				searchForm: {
					score: 0,
					name: ''
				},
				/*评价等级*/
				commentList: [{
						name: '好评',
						val: 10
					},
					{
						name: '中评',
						val: 20
					},
					{
						name: '差评',
						val: 30
					},
				],
				status: -1,
				detailid:'',
				remark:''
			};
		},
		created() {
			/*获取列表*/
			this.getData();
		},
		methods: {
			dialogFormVisible(){
				this.dialogVisible = false;
			},
			/*选择第几页*/
			handleCurrentChange(val) {
				let self = this;
				self.curPage = val;
				self.loading = true;
				let Params = self.searchForm;
				self.getData(Params);
			},

			/*每页多少条*/
			handleSizeChange(val) {
				this.curPage = 1;
				this.pageSize = val;
				this.getData();
			},

			/*获取列表*/
			getData(param = '') {
				let self = this;
				let Params = {};
				Params.status = self.status;
				Params.page = self.curPage;
				Params.list_rows = self.pageSize;
				if (param != '') {
					Params.score = param.score;
					Params.name = param.name;
				}
				PorductApi.warehouselist(Params, true).then(res => {
					self.loading = false;
					self.tableData = res.data.list;
					self.totalDataNumber = res.data.total
				}).catch(error => {
					self.loading = false;
				});
			},

			/*打开编辑*/
			detailClick(row) {
				let self = this;
				ElMessageBox.confirm('确认已给对应用户拨付库存吗?', '提示', {
					type: 'warning'
				}).then(() => {
					PorductApi.agreewarehouse({
						id: row.id
					}).then(data => {
						ElMessage({
							message: '操作成功',
							type: 'success'
						});
						self.getData();
					});
				});
			},
			editApplyStatus(){
				let self = this;
				PorductApi.noagreewarehouse({
					id: self.detailid,
					remark:self.remark
				}).then(data => {
					ElMessage({
						message: '操作成功',
						type: 'success'
					});
					self.dialogVisible = false;
					self.getData();
				});
			},
			/*订单详情*/
			orderClick(row) {
				this.$router.push({
					path: '/product/comment/Order',
					query: {
						order_id: row.order_id,
					}
				});
			},

			/*删除*/
			delClick: function(row) {
				let self = this;
				self.detailid = row.id;
				self.dialogVisible = true;
			},

			/*搜索查询*/
			onSubmit() {
				let self = this;
				self.loading = true;
				let Params = self.searchForm;
				Params.page = self.curPage;
				Params.list_rows = self.pageSize;
				Params.status = self.status;
				PorductApi.warehouselist(Params, true).then(data => {
					self.loading = false;
					self.tableData = data.data.list;

					self.totalDataNumber = data.data.total
				}).catch(error => {
					self.loading = false;
				});
			},

			/*切换选项卡*/
			handleClick(tab, event) {
				let self = this;
				self.curPage = 1;
				self.loading = true;
				self.status = tab;
				self.getData();
			},
		}
	};
</script>

<style></style>